{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}
<script src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> </script>
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {margin: 0px;background: #fff;}
    .upload {width: 100px;height: 100px;border: 1px solid #ddd;background-repeat: no-repeat;background-size: 100% 100%;position: relative;}
    .upload .icon {width: 100%;height: 100%;display: flex;justify-content: space-evenly;align-items: center;font-size:26px;color: #999;position: absolute;left: 0;top: 0px;z-index:10;background-size: 100% 100%;background-repeat: no-repeat;}
    .fa-trash,.fa-repeat,.fa-search-plus {display: none}
    .upload .icon.uploaded:hover .fa-search-plus {display: block;}
    .upload .icon.uploaded:hover .fa-repeat {display: block;}
    .upload .icon.uploaded:hover .fa-trash {display: block;}
    .outbtn {
        position: absolute;
        right: -29px;
        top: 0;
        height: 38px;
        width: 30px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        cursor: pointer;
    }
</style>
{/block}
{block name="main"}
<form class="layui-form" action="" lay-filter="form">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">基础设置</li>
            <li>高级编辑</li>
            <li>坐标图</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">栏目名称</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id">
                        <input type="hidden" name="site_id">
                        <input type="hidden" name="pid">
                        <input type="text" name="title" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">英文标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="english" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sort" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">网址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="url" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">是否下拉</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="drop" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF" value="1">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="show" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF" value="1">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyword" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">缩略图</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="img">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">背景图</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="bckimg">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">附加图</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="indexImg">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">附加字段1</label>
                    <div class="layui-input-block">
                        <input type="text" name="additional1" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">附加字段2</label>
                    <div class="layui-input-block">
                        <input type="text" name="additional2" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">高级内容</label>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="seo_title" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO关键字</label>
                        <div class="layui-input-block">
                            <input type="text" name="seo_keyword" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO描述</label>
                        <div class="layui-input-block">
                            <textarea name="seo_description" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-input-block">
                        <script id="editor" name="content" type="text/plain" style="width:95%;height:600px;"></script>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">坐标图</label>-->
<!--                        <div class="layui-input-inline upload">-->
<!--                            <div class="icon">-->
<!--                                <input type="hidden" name="img">-->
<!--                                <i class="fa fa-cloud-upload"></i>-->
<!--                                <i class="fa fa-trash"></i>-->
<!--                                <i class="fa fa-repeat"></i>-->
<!--                                <i class="fa fa-search-plus"></i>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width: 100%;display: flex;justify-content: center;">
        <button class="layui-btn" lay-submit="form" lay-filter="demo2">提交</button>
        <button class="layui-btn" lay-submit="form" lay-filter="demo2">重置</button>
    </div>
</form>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form','miniTab','element','upload','layer'], function () {
        var form = layui.form, layer = layui.layer, miniTab = layui.miniTab,$ = layui.jquery, element = layui.element, upload = layui.upload,layer = layui.layer,id = '{$Request.param.id}',pid = '{$Request.param.pid}',site_id = '{$Think.session.info.site.id}'
        var ue = UE.getEditor('editor');
        ue.ready(function(){
            getComLan()
        })

        //监听提交
        form.on('submit(demo2)', function (data) {
            data = data.field
            $.ajax({
                url:'/admin/editColumn',
                data,
                type:'post',
                success:res=>{
                    layer.confirm('提交成功,是否继续添加？', {
                        btn: ['继续添加','返回上层'] //按钮
                    }, function(){
                        if(pid){
                            window.location.href = '/admin/editColumn?pid='+pid
                        }else{
                            window.location.href = '/admin/editColumn'
                        }

                    }, function(){
                        miniTab.deleteCurrentByIframe();
                    });
                }
            })
            return false;
        });
        //上传组件开始
        $(".fa-cloud-upload").click(function(){
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                id:'chooseImg',
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(this).prev('input').val(src).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded')
                    $(this).hide()
                    layer.close(index)
                }
            });
        })
        $(".fa-trash").click(function(){
            $(this).parent().removeClass('uploaded').css({backgroundImage: ''}).find('input').val('').parent().find('.fa-cloud-upload').show()
        })
        $(".fa-repeat").click(function(){
            var _this = this
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(_this).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded').find('input').val(src)
                    layer.close(index)
                },
                cancel: function(){
                    $(_this).parent().removeClass('uploaded').find('.fa-cloud-upload').show()
                }
            });
        })
        $(".fa-search-plus").click(function(){
            var src = $(this).parent().css("backgroundImage").substring(5,($(this).parent().css("backgroundImage").length - 2))
            src = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "src": src, //原图地址
                    }
                ]
            }
            layer.photos({
                photos: src,
                //0-6的选择，指定弹出图片动画类型，默认随机
                anim: 5
            });
        })
        function getComLan(){
            if(id){
                $.get("/admin/editColumn",{id:id},obj=>{
                    form.val('form', {
                        id: obj.id,
                        site_id: obj.site_id,
                        pid: obj.pid,
                        title: obj.title,
                        english: obj.english,
                        sort: obj.sort,
                        keyword: obj.keyword,
                        description: obj.description,
                        seo_title: obj.seo_title,
                        seo_keyword: obj.seo_keyword,
                        seo_description: obj.seo_description,
                        url: obj.url,
                        img: obj.img,
                        bckimg: obj.bckimg,
                        indexImg: obj.indexImg,
                        drop: obj.drop,
                        show: obj.show,
                        additional1: obj.additional1,
                        additional2: obj.additional2,
                    })
                    ue.setContent(obj.content ? obj.content : '')
                    obj.img && $("input[name='img']").parent().css({backgroundImage:"url("+obj.img+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                    obj.bckimg && $("input[name='bckimg']").parent().css({backgroundImage:"url("+obj.bckimg+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                    obj.indexImg && $("input[name='indexImg']").parent().css({backgroundImage:"url("+obj.indexImg+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                })
            }else if(pid){
                form.val('form',{
                    pid:pid,
                    site_id:site_id,
                    sort:99,
                    drop:1,
                    show:1
                })
            }else{
                form.val('form',{
                    pid:0,
                    site_id:site_id,
                    sort:99,
                    drop:1,
                    show:1
                })
            }


        }
    })
</script>
{/block}